<template>
	<view class="">
		<!-- 收藏标签 -->
		<image src="@/static/images/recom2.png" class="recom-icon" alt="">

		<!-- 模特 -->
		<view class="model">
			<image :src="resData.if_synthesis == 1 ? resData.synthesis_url: '../../static/images/model.png' " w="750" h="1170" alt="">
				<!-- <image src="@/static/images/model.png" w="750" h="1170" alt=""> -->
		</view>


		<!-- 底部条 -->
		<view class="footer ft">
			<view class="footer-inner">
				<a href="javascript:;" class="pan-btn" @click="edit_info">
				</a>
				<a href="javascript:;" class="info-btn" @click="get_ingo">
				</a>
				<a href="javascript:;" class="del" @click="del_info">
				</a>
				<a href="javascript:;" class="share-btn">
				</a>
			</view>
		</view>


		<!-- 搭配信息 -->
		<view class="da-popp ft">
			<a href="javascript:;" class="info-close" @click="detail_close"></a>
			<view class="da-wrap">
				<view class="da-title">
					<p>搭配信息</p>
				</view>
				<view class="da-list">
					<ul>
						<li v-for="item in resData.user_get_params">
							<a href="javascript:;" class="da-link" @click="get_infos" :data-id="item.ourfabricid" :data-name="item.name">
								<view class="da-img">
									<image :src="item.ourfabric_info ? item.ourfabric_info.thumb : ''" alt="">
								</view>
								<view class="da-info">
									<h3>{{item.ourfabric_info ? item.ourfabric_info.title : ''}}</h3>
									<view class="da-bar">
										<p>{{item.ourfabric_info ? item.ourfabric_info.material:''}}</p>
										<span>{{item.name}}</span>
									</view>
								</view>
							</a>
						</li>
					</ul>
				</view>
			</view>
			<view class="da-wrap">
				<view class="da-title">
					<p>标签风格</p>
				</view>
				<view class="da-label">
					<span v-for="item in resData.stylename">{{item}}</span>
				</view>
			</view>
		</view>

		<!-- 面料详情 -->
		<view class="cloth-popp ft cloth-detail">
			<a href="javascript:;" class="detail-close" @click="detail_close"></a>
			<view class="cloth-wrap">
				<view class="cloth-title">
					<b>面料详情</b>
					<h3>{{type_name}}</h3>
				</view>
				<view class="cloth-content">
					<view class="cloth-detail-item">
						<view class="cloth-detail-img">
							<image :src="fabricsInfo.thumb" alt="">
						</view>
						<view class="cloth-detail-info">
							<view class="cloth-detail-top">
								<h3>{{fabricsInfo.title}}</h3>
								<p>{{fabricsInfo.material}}</p>
							</view>
							<view class="cloth-price">
								<p>￥<em>{{fabricsInfo.price}}</em></p>
							</view>
							<view class="cloth-detail-tips">
								<p>克重：无 编号：{{fabricsInfo.goods_no}}</p>
							</view>
						</view>
					</view>
					<view class="cloth-detail-label">
						<ul>
							<li>
								<p><b>品牌：</b>暂无资料</p>
							</li>
							<li>
								<p><b>适用节气：</b>{{fabricsInfo.season}}</p>
							</li>
							<li>
								<p><b>材质：</b>{{fabricsInfo.material}}</p>
							</li>
							<li>
								<p><b>硬软程度：</b>暂无资料</p>
							</li>
							<li>
								<p><b>花色：</b>{{fabricsInfo.colors}}</p>
							</li>
						</ul>
					</view>
					<view class="cloth-detail-p">
						<p><b>面料描述：</b>{{fabricsInfo.title}}</p>
					</view>
				</view>
			</view>
		</view>


		<!-- 面料弹出 -->
		<view class="cloth-left">
			<ul>
				<li>
					<p>上装</p>
					<view class="cloth-bar">
						<view class="cloth-show">
							<image src="@/static/images/02_02.jpg" alt="">
						</view>
						<a href="javascript:;" class="cloth-show-close"></a>
					</view>
				</li>
				<li>
					<p>上装</p>
					<view class="cloth-bar">
						<view class="cloth-show">
							<image src="@/static/images/02_02.jpg" alt="">
						</view>
						<a href="javascript:;" class="cloth-show-close"></a>
					</view>
				</li>
				<li>
					<p>上装</p>
					<view class="cloth-bar">
						<view class="cloth-show">
							<image src="@/static/images/02_02.jpg" alt="">
						</view>
						<a href="javascript:;" class="cloth-show-close"></a>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import {
		flexible
	} from '@/static/js/flexible.js';
	import {
		jquery
	} from '@/static/js/jquery.js';
	import {
		index
	} from '@/static/js/index.js';
	export default {
		data() {
			return {
				options: '',
				resData: [],
				fabricsInfo: '',
				type_name: ''
			}
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			edit_info(){
				// console.log(this.options)
				uni.navigateTo({
					url: "/pages/edit/index?id=" + this.options.id
				})
			},
			del_info(){
				var that = this
				uni.showModal({
					title: '提醒',
					content: '确定要删除该搭配么？',
					success: function(res) {
						if (res.confirm) {
							var post_data = {
								ids: that.options.id
							}
							that.$http({
								url: 'Customizedapi/User/del_collection',
								data: post_data,
								hideLoading: false,
								success: res => {
									if (res.code == 1) {
										uni.showToast({
											title: res.msg,
											duration: 2000,
											mask: true,
											icon: 'success',
										});
										
										uni.navigateTo({
											url: "/pages/collection/index"
										})
									}
								}
							})
						}
					},
				})
			},
			
			get_info(){
				var post_data = {
					id: this.options.id
				}
				
				this.$http({
					url: 'Customizedapi/User/info_collection',
					data: post_data,
					hideLoading: false,
					success: res => {
						this.resData = res.data
					}
				})
			},
			
			get_infos(e){
				var gid = e.currentTarget.dataset.id
				var post_data = {
					id: gid
				}
				
				this.$http({
					url: 'Customizedapi/Fabric/fabrics_info',
					data: post_data,
					hideLoading: true,
					success: res => {
						this.type_name = e.currentTarget.dataset.name
						this.fabricsInfo = res.data
						$('.cloth-detail').animate({
							'bottom': 0
						}, 300);
					}
				})
			},
			
			get_ingo(){
				$('.da-popp').animate({'bottom': 0},300);
				e.stopPropagation();
			},
			detail_close(){
				$('.da-popp').animate({'bottom': '-100%'},300);
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.options = options
			this.get_info()
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},
	}
</script>

<style>
	image{
		width: 100%;
		height: 91%;
		vertical-align: middle;
	}
	
	.da-list ul li image{
		width: 100%;
		height: 100%;
	}
	.cloth-show img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    margin: auto;
	}
	.recom-icon {
	  width: .533333rem;
	  height: .626667rem;
	  position: absolute;
	  top: .4rem;
	  right: .4rem;
	  z-index: 9;
	}
</style>
